<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery.min.js"></script>
	</head>
	<body>
		<div id="msg">使用jQuery来实现div中的字体变大、变色</div>
		
		<button id="pay">支付宝支付</button>
		
		<div style="margin:10px;">
			<!-- 页面上可以有很多组选择，怎么知道是一组呢？ id必须相同 -->
			<input type="checkbox" id="ck" checked="checked"/> 红色
			<input type="checkbox" id="ck"/> 绿色
			<input type="checkbox" id="ck"/> 蓝色
			
			<button id="selectAll" disabled="disabled">全选</button>
			<button id="unSelectAll">取消</button>
		</div>
	</body>
	<script>
		$().ready(function(){
			//获取div的对象，设置css样式，改变字体大小
			$("#msg").css("font-size", 36);		//样式：font-size: 36
			$("#msg").css("color", "red");		//样式：color: red
			
			//给按钮动态绑定一个事件onclick
			//onclick没有on，参数是匿名函数
			$("#pay").click(function(){
				//禁止按钮：html 属性：disabled true禁止，false可以点击
				$("#pay").prop("disabled", true);			//属性方法
			});			
			
			//实现全选，jQuery选择器[]，过滤出我想要的元素，[id标签的id=ck（id给定名称)]
			//jQuery可以针对一组值进行设定，动态绑定click事件
			$("#selectAll").click(function(){
				$("[id=ck]").prop("checked", true);		//所有ck框全部选中
			})
			$("#unSelectAll").click(function(){
				$("[id=ck]").prop("checked", false);		//所有ck框全部取消选中
			})
		})
	</script>
</html>